package myJs.projectCps

import cats.effect.SyncIO
import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import myJs.cps._
import myJs.myPkg.jquery._
import org.scalajs.dom
import myJs.Implicits._
import myJs.Utils._

/** Created by yz on 11/5/2023
  */
object ImageToolCp {

  case class Props(pdfUrl: String, pngUrl: String) {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    object FTool {

      def myToggle(e: ReactEventFromHtml) = SyncIO {
        val y = e.target.asInstanceOf[dom.html.Link]
        val parentJq = $(y).parents(".row:first")
        parentJq.find(s"#content").toggleClass("col-sm-12 col-sm-8")
        parentJq.find(s"#sidebar").toggleClass("collapsed")
        parentJq.find(s".myToggle i").toggleClass("fa-angle-double-right fa-angle-double-left")
        ()
      }

    }

    div(
      display.flex,
      justifyContent.flexEnd,
      marginBottom := 5.px,
      div(
        marginRight := 10.px,
        className := "btn-group",
        a(
          borderTopRightRadius := 4.px,
          borderBottomRightRadius := 4.px,
          title := "下载图片",
          className := "btn  btn-default idsButton",
          dataToggle := "dropdown",
          vDataHover := "dropdown",
          vDataCloseOthers := "true",
          vAriaExpanded := "false",
          i(className := "fa fa-bars")
        ),
        ul(
          className := "dropdown-menu pull-right",
          li(
            a(
              href := props.pdfUrl,
              "下载PDF图片"
            )
          ),
          li(
            a(
              href := props.pngUrl,
              "下载PNG图片"
            )
          )
        )
      ),
      a(
        onClick ==> FTool.myToggle,
        border := "0px",
        marginTop := 8.px,
        i(color := "grey", className := "fa fa-angle-double-right"),
        " "
      )
    )

  }

}
